<template>
  <el-row :gutter="24">
    <el-col :span="24" :offset="0">
      <div class="grid-content ep-bg-purple-light"/>
      <div class="big-box">
        <div class="box-body-right">
          <div class="right-botton">
            <div class="logo">
              <span class="name-title">公司logo </span>
              <el-button type="primary" class="btn-BC name-titles">保存</el-button>
            </div>
            <div class="box-table">
              <el-upload class="upload"
                         action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                         multiple="flase"
                         drag="true"
                         tip="logo上传"
              >
                <el-icon class="cameraFilled">
                  <CameraFilled/>
                </el-icon>
              </el-upload>

            </div>
            <span class="name-title">公司名称
          </span>
            <div class="AN">
              <el-input size="large" v-model="company" placeholder="请输入公司名称"/>
              <el-button type="primary" size="large"  class="btn-BC">确定</el-button>
            </div>
            <span class="name-title">服务器</span>
            <div class="AN">
              <el-input size="large" v-model="url" placeholder="请输入服务器地址"/>
              <el-button size="large" type="primary" class="btn-BC">8088端口</el-button>
            </div>
            <span class="name-title">数据库</span>
            <span class="updateOk">一次性修改。请确认</span>
            <br>
            <el-row>
              <el-col :span="2">
                <label for="nameId">账号:</label>
              </el-col>
              <el-col :span="22">
                <el-input size="large" v-model="username" placeholder="请输入账号" id="nameId"/>
              </el-col>
            </el-row>
            <br>
            <el-row>
              <el-col :span="2">
                <label for="password">密码:</label>
              </el-col>
              <el-col :span="22">
                <el-input size="large" v-model="password" type="password" placeholder="请输入密码" show-password class="GS-name"
                          id="password"/>
              </el-col>
              <el-col :push="2">
                <br>
                <el-button size="large" type="primary">确定</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "SystemSetting",
  data() {
    return {
      url: "IP168.1.1",
      username: "admin",
      password: "123456",
      company: "",
    }
  },
}


</script>


<style scoped>
* {
  padding: 0;
  margin: 0;
}

.AN {
  position: relative;
}


.btn-BC {
  position: absolute;
  right: 0;
}

.big-box {
  /*float: right;*/
  /*width: 82%;*/
}

li {
  list-style: none;
}

.box-body-right {
  width: 100%;
}

.name-title {
  display: inline-block;
  margin: 20px auto;
  font-size: 18px;
  font-weight: bold;
}

.name-titles {
  margin: 20px auto;
}


.right-botton {
  position: relative;
  /*margin: auto 20px;*/
 /* margin: auto 20px auto auto;*/
}

.box-table {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: white;
  overflow: hidden;
}

.cameraFilled {
  border: none;
  font-size: 30px;
  color: rgb(218, 218, 218);
}

.upload {
  border: none;
}
.updateOk{
  margin-top: 20px;
  font-size: 14px;
  color: rgb(252,114,67);
  float: right;
}

</style>
